<template>
  <div class="container">
    <el-row
      :gutter="40"
      style="margin-left: 20px; margin-right: 20px; margin-top: 40px"
    >
      <el-col :span="6">
        <div class="grid-content">
          <div class="icon-style">
            <i class="el-icon-s-management"></i>
          </div>
          <div class="text">
            <span style="display: block; margin-bottom: 10px">New Visites</span>
            <span style="display: block"></span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <div class="icon-style2">
            <i class="el-icon-chat-dot-square"></i>
          </div>
          <div class="text">
            <span style="display: block; margin-bottom: 10px">Messages</span>
            <span style="display: block"></span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <div class="icon-style3">
            <i class="el-icon-s-promotion"></i>
          </div>
          <div class="text">
            <span style="display: block; margin-bottom: 10px">Airplanes</span>
            <span style="display: block"></span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <div class="icon-style4">
            <i class="el-icon-basketball"></i>
          </div>
          <div class="text">
            <span style="display: block; margin-bottom: 10px">Basketballs</span>
            <span style="display: block"></span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="big_box">
      <div class="left_box">
        <div class="container">
          <div class="line_echart" id="line_ref"></div>
        </div>
      </div>
      <!-- <div class="right_box">
    <rotation></rotation>
  </div> -->
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return { chartInstance: null };
  },
  computed: {},
  created() {},
  mounted() {
    this.initechart();
  },
  methods: {
    initechart() {
      this.chartInstance = this.$echarts.init(
        document.getElementById("line_ref")
      );

      const option = {
        backgroundColor: "#b3c0d1",
        title: {
          text: "Customized Pie",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "item",
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "Direct" },
              { value: 310, name: "Email" },
              { value: 274, name: "Union Ads" },
              { value: 235, name: "Video Ads" },
              { value: 400, name: "Search Engine" },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(255, 255, 255, 0.3)",
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)",
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
  },
};
</script>
<style scoped>
/* // @import './test.scss'; */
.el-row {
  margin-bottom: 20px;
  /* &:last-child {
      margin-bottom: 0;
    } */
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.container {
  overflow: hidden;
  flex-direction: column;
  display: flex;
}
.grid-content {
  align-items: center;
  justify-content: space-between;
  display: flex;
  cursor: pointer;
  border-radius: 4px;
  min-height: 36px;
  background-color: rgb(255, 255, 255);
  height: 150px;
}
.big_box {
  margin-top: 40px;
  margin-left: 40px;
  margin-right: 40px;
  height: 500px;
  /* border: 1px solid red; */
}
.icon-style {
  float: left;
  margin-left: 25px;
  font-size: 65px;
  color: rgb(64, 201, 198);
}
.icon-style2 {
  float: left;
  margin-left: 25px;
  font-size: 65px;
  color: rgb(65, 124, 212);
}
.icon-style3 {
  float: left;
  margin-left: 25px;
  font-size: 65px;
  color: rgb(212, 65, 65);
}
.icon-style4 {
  float: left;
  margin-left: 25px;
  font-size: 65px;
  color: rgb(193, 76, 27);
}
.text {
  float: right;
  font-weight: bold;
  font-size: 18px;
  margin-right: 25px;
}
.left_box {
  float: left;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
}
.right_box {
  float: left;
  width: 35%;
  height: 100%;
  background-color: rgb(255, 255, 255);
}
.line_echart {
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
}
.container {
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
}
</style>